import { message } from 'antd';
import React from 'react';
import Modal from 'ronds-react-ui/es/components/Modal';
import TimeSeries from '../../core/TimeSeries';
import { LABEL_TYPES } from '../../utils/constant';
import { ITimeSeriesProps } from '../../utils/types';

interface ITimeSeriesRegionProps extends ITimeSeriesProps {}

const TimeSeriesRegion = (props: ITimeSeriesRegionProps) => {
  const { title, topic } = props;
  const [modalVisible, setModalVisible] = React.useState<boolean>(false);
  const [modalTitle, setModalTitle] = React.useState<string>('');

  const [selectItem, setSelectItem] = React.useState<any[]>([]);

  const [defalutData, setDefalutData] = React.useState<any>({});

  const chartData = [
    [
      [1591068223299, 1],
      [1591069223299, 2],
      [1591070223299, 2],
      [1591071223299, 9],
      [1591072223299, 2],
      [1591073223299, 8],
      [1591074223299, 2],
    ],
  ];

  const onNodeClick = (_data: any) => {
    console.log('====节点点击====');
    console.log(_data);
    setModalTitle(`${_data.name}`);
    setModalVisible(true);
  };

  const onBrushChange = (_data: any) => {
    setSelectItem([..._data]);
  };

  // 确定选择区域
  const onConfirmBrush = () => {
    const _defalutData = defalutData;
    _defalutData[modalTitle] = selectItem;
    setDefalutData({ ..._defalutData });
    setModalVisible(false);
  };

  return (
    <>
      <TimeSeries {...props} secondData={defalutData} onNodeClick={onNodeClick} />
      <Modal
        bodyStyle={{
          paddingBottom: 0,
          overflow: 'hidden',
        }}
        title={modalTitle}
        visible={modalVisible}
        itemState={{ width: window.innerWidth * 0.5, height: 550 }}
        style={{ display: 'flex' }}
        minHeight={400}
        minWidth={500}
        onOk={onConfirmBrush}
        onCancel={() => {
          setModalVisible(false);
        }}
      >
        <div style={{ height: '400px' }}>
          <TimeSeries
            key={modalTitle}
            title={title}
            topic={topic}
            secondKey={modalTitle}
            defalutData={defalutData[modalTitle]}
            value={chartData}
            label={[
              {
                type: LABEL_TYPES.TIME_SERIES,
                data: ['second-one', 'second-two'],
              },
            ]}
            onBrushChange={onBrushChange}
          />
        </div>
      </Modal>
    </>
  );
};

export default TimeSeriesRegion;
